Complex State কী এবং কিভাবে পরিচালনা করবেন?

Complex State বলতে বোঝায় এমন স্টেট যা এক বা একাধিক ডেটা প্রকারের সমন্বয়ে তৈরি, যেমন একটি অ্যারে, অবজেক্ট বা nested ডেটা যা একাধিক সাব-স্টেট বা ফিচার ধারণ করে। এই ধরনের স্টেট সাধারণত একাধিক পরিমাণ তথ্য বা সম্পর্কিত ডেটা রাখে এবং তা সহজে পরিচালনা করা কঠিন হতে পারে। উদাহরণস্বরূপ, একটি অ্যাপ্লিকেশন যেখানে ব্যবহারকারীর প্রোফাইল তথ্য, পছন্দ, শপিং কার্ট, বা বিভিন্ন ফিচারের স্টেট একত্রিত থাকে, সেটি একটি complex state হতে পারে।

Redux স্টোরে Complex State পরিচালনা করার জন্য আপনি সাধারণত নেস্টেড অবজেক্ট, অ্যারে, বা একাধিক slice ব্যবহার করেন। এখানে লক্ষ্য হচ্ছে স্টেট ম্যানেজমেন্টকে আরও কার্যকরী, স্কেলেবল এবং সহজ করা।

Complex State কী?

Complex State হল Redux স্টোরে যে কোনো ধরনের স্টেট, যা সাধারণত একাধিক ডেটার ধরনের সমন্বয়ে তৈরি হয়ে থাকে। যেমন:

• নেস্টেড অবজেক্ট: যেখানে একটি অবজেক্টের ভিতরে আরেকটি অবজেক্ট বা অ্যারে থাকে।
• অ্যারে: যেখানে ডেটার তালিকা বা গ্রুপ থাকে।
• অধিক বৈশিষ্ট্য যুক্ত অবজেক্ট: যেখানে একাধিক ডেটা প্রপার্টি থাকে এবং তারা একে অপরের সাথে সম্পর্কিত।

যেমন, একটি উইজার প্রোফাইল স্টেট যেখানে:

const userProfile = {
  id: 1,
  name: "John Doe",
  preferences: {
    theme: "dark",
    notifications: true,
  },
  posts: [
    { id: 101, title: "First Post", content: "Hello World!" },
    { id: 102, title: "Second Post", content: "Redux is awesome!" },
  ]
};

এই ধরনের স্টেটকে complex state বলা হয়, কারণ এখানে একাধিক নেস্টেড অবজেক্ট এবং অ্যারে রয়েছে।

Complex State পরিচালনা করার উপায়

Redux-এ Complex State পরিচালনা করা কিছুটা চ্যালেঞ্জিং হতে পারে, কারণ আপনাকে স্টেটের কাঠামো ও রিডিউসার লজিক পরিকল্পনা করে পরিবর্তন করতে হয়। তবে, Redux Toolkit-এর মাধ্যমে এটি আরও সহজ এবং কার্যকরী হয়।

১. Slice দ্বারা Complex State ভেঙে ফেলা

Redux Toolkit-এ slice ব্যবহার করে, আপনি আপনার স্টেটকে একাধিক ফিচারে ভাগ করে নিতে পারেন, যা একে আরও স্কেলেবল এবং পরিষ্কার করে তোলে। যদি আপনার অ্যাপ্লিকেশনে অনেক ফিচার থাকে, তবে প্রতিটি ফিচারের জন্য আলাদা slice তৈরি করা একটি ভালো পদ্ধতি হতে পারে।

যেমন, একটি কমপ্লেক্স userProfile স্টেটের জন্য আলাদা slice তৈরি করা:

import { createSlice } from '@reduxjs/toolkit';

const userProfileSlice = createSlice({
  name: 'userProfile',
  initialState: {
    id: null,
    name: '',
    preferences: {
      theme: 'light',
      notifications: false,
    },
    posts: []
  },
  reducers: {
    setUserProfile(state, action) {
      state.id = action.payload.id;
      state.name = action.payload.name;
    },
    setPreferences(state, action) {
      state.preferences = { ...state.preferences, ...action.payload };
    },
    addPost(state, action) {
      state.posts.push(action.payload);
    }
  }
});

export const { setUserProfile, setPreferences, addPost } = userProfileSlice.actions;
export default userProfileSlice.reducer;

এখানে:

• setUserProfile অ্যাকশনের মাধ্যমে প্রোফাইলের মূল তথ্য সেট করা হচ্ছে।
• setPreferences অ্যাকশনের মাধ্যমে প্রেফারেন্স ডেটা পরিবর্তন করা হচ্ছে।
• addPost অ্যাকশনের মাধ্যমে পোস্ট যুক্ত করা হচ্ছে।

এভাবেই, আপনি userProfile স্টেটকে ভেঙে আলাদা ফিচার হিসাবে পরিচালনা করতে পারেন।

২. নেস্টেড স্টেট ম্যানিপুলেশন

Complex State-এ নেস্টেড অবজেক্ট বা অ্যারে থাকলে, সেগুলোর মধ্যে সঠিকভাবে পরিবর্তন করার জন্য আপনাকে সাবধানে রিডিউসার তৈরি করতে হবে, কারণ Redux তে স্টেট ইমিউটেবল (immutable) থাকে, অর্থাৎ আপনি সরাসরি স্টেট পরিবর্তন করতে পারবেন না। আপনাকে সবসময় নতুন স্টেট তৈরি করতে হবে।

Redux Toolkit-এর createSlice এর মধ্যে আপনি রিডিউসার ফাংশন ব্যবহার করে nested স্টেটকে ইমিউটেবলভাবে আপডেট করতে পারেন। উদাহরণস্বরূপ, প্রেফারেন্স পরিবর্তন করার জন্য:

setPreferences(state, action) {
  state.preferences = { ...state.preferences, ...action.payload };
}

এখানে spread operator ব্যবহার করে, নতুন একটি অবজেক্ট তৈরি হচ্ছে, যা আগের প্রেফারেন্সের মানগুলিকে ধরে রেখে নতুন মান যোগ করছে।

৩. Normalize করা ডেটা

কমপ্লেক্স স্টেটে ডেটা নরমালাইজেশন করা অত্যন্ত গুরুত্বপূর্ণ, বিশেষত যখন ডেটা সম্পর্কিত বা সম্পর্কিত অবজেক্ট থাকে। Normalize করার মানে হলো, সম্পর্কিত ডেটাকে আলাদা আলাদা অবজেক্টে রেখে তার মধ্যে সংযোগ তৈরি করা।

যেমন, আপনি যদি একটি অ্যাপ্লিকেশনে ব্যবহারকারীর পোস্ট এবং কমেন্ট সম্পর্কিত ডেটা রাখেন, তবে আপনি এটি নরমালাইজডভাবে রাখতে পারেন, যেমন:

const initialState = {
  users: {
    1: { id: 1, name: 'John Doe' },
    2: { id: 2, name: 'Jane Smith' },
  },
  posts: {
    101: { id: 101, userId: 1, content: 'Post 1' },
    102: { id: 102, userId: 2, content: 'Post 2' },
  },
  comments: {
    1001: { postId: 101, userId: 2, content: 'Great post!' },
    1002: { postId: 102, userId: 1, content: 'Nice work!' },
  }
};

এখানে, users, posts এবং comments আলাদা আলাদা অবজেক্টে সংরক্ষিত থাকে এবং userId, postId এর মাধ্যমে তাদের সম্পর্ক তৈরি করা হয়।

৪. Reusability এবং Scalability নিশ্চিত করা

কমপ্লেক্স স্টেট ব্যবস্থাপনায় আপনি চাইলে স্টেট বা রিডিউসারগুলিকে আরও reusable এবং scalable করতে পারেন। এর জন্য আপনি utility functions বা selectors ব্যবহার করতে পারেন যা স্টেটের কোনো নির্দিষ্ট অংশের মান বের করতে সাহায্য করবে।

// selector to get posts by userId
const selectPostsByUser = (state, userId) => {
  return state.posts.filter(post => post.userId === userId);
};

এভাবে, স্টেটকে আলাদা আলাদা ফিচারে ভাগ করা, রিডিউসার ফাংশন সহজ করা এবং selectors ব্যবহার করার মাধ্যমে আপনি একটি কমপ্লেক্স স্টেট সহজেই পরিচালনা করতে পারবেন।

সারাংশ

Complex State এমন স্টেট যা একাধিক ডেটা প্রকার এবং সম্পর্কযুক্ত অবজেক্টের সমন্বয়ে তৈরি হয়। Redux-এ Complex State পরিচালনা করার জন্য:

• Slice ব্যবহার করে স্টেটকে বিভিন্ন ফিচারে ভাগ করা যেতে পারে।
• Nested state আপডেট করার জন্য ইমিউটেবল পদ্ধতিতে রিডিউসার তৈরি করা হয়।
• Normalize করে ডেটা স্টোরে সম্পর্কযুক্ত ডেটাকে সহজভাবে পরিচালনা করা যায়।
• Selectors ব্যবহার করে স্টেটের নির্দিষ্ট অংশে সহজে অ্যাক্সেস করা যায়।

এই পদ্ধতিগুলির মাধ্যমে আপনি Redux-এ Complex State আরও সহজ, কার্যকরী এবং স্কেলেবলভাবে পরিচালনা করতে পারবেন।